<template>
	<view>
		<view class="hear_img">
			<van-swipe :autoplay="3000" lazy-render vertical style="height: 280px;">
			  <van-swipe-item v-for="image in images" :key="image">
			    <img :src="image" />
			  </van-swipe-item>
			</van-swipe>

		</view>
		<view class="hear_type">
			<view v-for="item in activityType" :class="['type_title',active === item.key?'active':'']" @click="activeClick(item)">
				{{item.title}}
			</view>
		</view>
		<view class="hear_content" v-for="(item,index) in activityData" :key="index">
			<view class="content_card" :style="{ background: item.color}">		
				<view class="card_heared">
					<view>
						<van-image
						  round
						  width="39"
						  height="39"
						  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
						/>
					</view>
					<view class="heared_title">
						<view class="name">{{item.name}}</view>
						<view class="title">{{item.desc}}</view>
					</view>
					<view :class="['heared_btn',activityFollow.includes(item.id)?'cancel_btn':'']" @click="followClick(item,activityFollow.includes(item.id))">
						{{ activityFollow.includes(item.id) ? '取关' : '关注' }}
					</view>
				</view>
				<MyImgList></MyImgList>
				<view class="card_type">
					<view class="title" :style="{ background: randomMonochrome[Math.floor(Math.random() * 6)]}" v-for="t in item.type"> 
						{{t}}
					</view>
				</view>
				<view class="card_footer">
					<view class="time">{{item.time}}</view>
					<view class="comment">
						<van-icon name="chat-o"  size="12" />
						<text>{{item.comment}}</text>
					</view>
					<view>
						<van-icon name="like-o"  size="12" />
						<text>{{item.like}}+</text>
					</view>
				</view>
			</view>			
		</view>
		
	</view>
</template>

<script>
	import { ref, onMounted,nextTick,watch  } from 'vue';
	import {activityType,randomColor,randomMonochrome} from '../../utils/dataType.js';	
	import MyImgList from '../../components/imgList/imgList.vue';

	export default {
		components:{MyImgList},
		setup(props){
			const active = ref('all')
			const activityData = ref([])
			const activityFollow = ref ([])
			const images = ref([
				 '../../static/activity.png',
				 '../../static/product_detail.png',
				 '../../static/man.png',
				 '../../static/woman.png',
			])
			const activeClick = (item) =>{
				active.value = item.key
				switch(item.key){
					case 'all':
					  activityData.value = []
					  getActivityList(10)	
					  break;
					case 'follow':
					  getfollowActive()			  
					  break;
					case 'popular':
					activityData.value = []
					getActivityList(3)
					  break;					  
				}
			}
			const getfollowActive = () =>{
				let followData = uni.getStorageSync('follow')
				if(followData){
					activityData.value = activityData.value.filter(item => followData.includes(item.id) )					
				}else{
					activityData.value = []
				}
			}
			
			const followClick = (item,type) =>{
				let data = []
				let followData = uni.getStorageSync('follow')
				if(type){
					//已经关注了
					data = followData.filter(t => t !== item.id)				
				}else{
					if(followData){
						data = followData
					}
					data.push(item.id)
				}
				uni.setStorageSync('follow',data)
				getFloowData()
				if(active.value === 'follow'){
					getfollowActive()
				}
			}
			
			const getActivityList = (sum)=>{
				for(let i=0;i<sum;i++){
					activityData.value.push({
						id: i,
						color:randomColor[Math.floor(Math.random() * 6)],
						name:`小鳄鱼${i + 1}号`,
						desc:'持续输出，运动狂魔',
						type:['健身官方课程','持续打卡·有奖品运动'],
						time: `2023年12月${i}日14:0${i}`,
						comment:Math.floor(Math.random() * 1000),
						like:Math.floor(Math.random() * 100) + 'w'
					})
				}
			}
			const getFloowData = ()=>{
				let followData = uni.getStorageSync('follow')		
				if(followData){
					activityFollow.value = followData
				}
			}
			onMounted (async ()=>{
				await nextTick();
				getActivityList(10)	
				getFloowData()
				
				if(props.type){
					activeClick({key:props.type})
				}
			})
			
			
			
			return {
				activityType,
				randomColor,
				randomMonochrome,
				active,
				activeClick,
				followClick,
				activityData,
				activityFollow,
				images
			}
		}
	}
</script>

<style lang="scss"  scoped>
	.hear_img{
		img{
			height: 282px;
			width: 100%;
		}
	}
	.hear_type{
		display: flex;
		height: 30px;
		align-items: center;
		padding-left: 20px;
		margin-bottom: 10px;
		margin-top: 5px;
		.type_title{
			margin-right: 20px;
			color: #808080;
			font-weight: 500;
			font-size: 18px;
		}
		.active{
			color:#000000;
			position: relative;
			font-weight: 700;
			font-size: 20px;
		}
		.active::before{
			content:"";
			position: absolute;
			width: 0;
			height:0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 5px solid black;
			bottom: -7px;
			left:50%;
			transform:translateX(-50%);
		}
	}
	.hear_content{
		padding: 5px 15px;
		.content_card{
			height: 315px;
			width: 100%;
			opacity: 1;
			border-radius: 10px;
		
			.card_heared{
				padding: 15px 10px 10px;
				display: flex;
				justify-content: space-between;
				.heared_title{
					margin-left: -80px;
					.name{
						font-size: 16px;
						font-weight: 700;
						letter-spacing: 0px;
						color: rgba(0, 0, 0, 1);
					}
					.title{
						font-size: 13px;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 21.84px;
						color: rgba(0, 0, 0, 1);
					}
				}
				.heared_btn{
					width: 57px;
					height: 31px;
					opacity: 1;
					border-radius: 213px;
					background: rgba(0, 0, 0, 1);
					color: rgba(255, 255, 255, 1);
					line-height: 31px;
					text-align: center;
				}
				.cancel_btn{
					background: rgba(170, 170, 170, 1.0);
					color: rgba(255, 255, 255, 1);
				}
				
			}
		// 	.card_img{
		
		// 		display: flex;
		// 		width: 100%;
		// 		.big{
		// 			flex: 1;
		// 			margin-left: 8px;
		// 			image{
		// 				width: 100%;
		// 				height: 160px;
						
		// 				border-radius: 6px;
		// 			}
		// 		}
		// 		.small{
		// 			width: 172px;
		// 			margin-left: 5px;
		// 			image{
		// 				width: 77px;
		// 				height: 77px;
		// 				margin: 0 3px;
		// 				border-radius: 6px;
		// 			}
		// 		}
		// 	}
			.card_type{
				padding: 10px;
				display: flex;
				.title{
					padding: 0 8px;
					margin-right: 5px;
					height: 24px;
					line-height: 24px;
					font-size: 12px;
					opacity: 1;
					border-radius: 174px;
					background: #e1f7b2;
				}
			}
			.card_footer{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 10px;
				.time{
					font-size: 11px;
					font-weight: 500;
				}
				.comment{
					margin-left: 84px;
				}
				text{
					font-size: 11px;
				}
			}
		}
	}
</style>
